import React, { Component } from 'react'
import Axios from '@/utils/request'
// import ImageLayout from 'react-image-layout';
export default class Photo extends Component {
  constructor() {
    super()
    this.state = {
      switchin: true,
      articles: [],
      currentArticle: {},
      lookPage: false,
      showLogin: false,
      userInfo: {},
      loading: false
    }
  }
  switchOut(n) {
    this.setState({
      switchin: n
    })
  }
  componentWillMount() {
    // this.getArticleList()
    // this.getUserInfo()
    setTimeout(() => {
      this.initPhoto()
    }, 1000);
  }
  changeArticle(article) {
    this.refs.articleComponent.resetScrollTop()
    this.setState({
      currentArticle: article,
      lookPage: true
    })
  }
  toggleMenu() {
    this.setState(({ lookPage }) => ({
      lookPage: !lookPage
    }))
  }
  setLoginStatus(status) {
    this.setState({
      showLogin: status
    })
  }
  showLogin() {
    this.setState({
      showLogin: true,
      lookPage: true,
      currentArticle: {
        title: 'Github授权',
        needLoginGithub: true
      }
    })
  }
  initPhoto() {
    var waterfall = new window.WaterFall({
      container: '#waterfall',
      pins: ".pin",
      loader: '#loader',
      gapHeight: 20,
      gapWidth: 20,
      pinWidth: 216,
      threshold: 100
    },
      () => {
        this.setState({
          loading: false
        })
        const _loader = document.querySelector('#loader') || {}

        _loader.style.display = 'none';

      }
    );

    let index = 10

    const setImg = () => {
      // 生成模拟数据
      this.setState({
        loading: true
      })
      const _loader = document.querySelector('#loader') || {}

      _loader.style.display = 'block';

      var mockData = {
        data: []
      };
      for (var i = 0; i < index; i++) {
        mockData.data[i] = {
          src: `https://muyunyun.cn/waterfall/images/${i + 1}.png`,
          title: '图片' + i
        }
      }
      index += 6
      if (index >= 20) {
        index = 10
      }

      var arr = [];
      for (var i = 0, len = mockData.data.length; i < len; i++) {
        var data = mockData.data[i];
        arr.push('<div class="pin"><img src="' + data.src + '" class="img" alt="' + data.title + '"> <p class="description">' + data.title + '</p></div>')
      }

      // 调用 append 方法 检验是否所有的图片都具有高度后才会 append 进文档树中
      waterfall.append(arr.join(''), '.img')

    }

    const scrollRef = document.getElementById('scroll')

    scrollRef.addEventListener('scroll', (e) => {
      if (scrollRef.scrollTop + scrollRef.clientHeight + 20 >= scrollRef.scrollHeight) {
        console.log('1', document.getElementById('scroll').clientHeight);
        console.log('2', document.getElementById('scroll').scrollTop);
        console.log('3', document.getElementById('scroll').scrollHeight);
        if (!this.state.loading) {
          setImg()
        }
      }
    })
    waterfall.on("load", function () {
      setImg()
    })
    // waterfall.on("load", function () {
    //   setTimeout(function () {
    //     // 生成模拟数据
    //     var mockData = {
    //       data: []
    //     };
    //     for (var i = 0; i < 10; i++) {
    //       mockData.data[i] = {
    //         src: `https://muyunyun.cn/waterfall/images/${i + 1}.png`,
    //         title: '图片' + i
    //       }
    //     }

    //     var arr = [];
    //     for (var i = 0, len = mockData.data.length; i < len; i++) {
    //       var data = mockData.data[i];
    //       arr.push('<div class="pin"><img src="' + data.src + '" class="img" alt="' + data.title + '"> <p class="description">' + data.title + '</p></div>')
    //     }

    //     // 调用 append 方法 检验是否所有的图片都具有高度后才会 append 进文档树中
    //     waterfall.append(arr.join(''), '.img')
    //   }, 1000)
    // })


  }
  async getArticleList() {
    try {
      const { data } = await Axios({
        url: 'https://api.github.com/repos/jkhrdhr/my-voice/issues'
      })
      this.setState({
        articles: data,
        currentArticle: data[0]
      })
    } catch (err) {
      this.showLogin()
    }
  }
  async getUserInfo() {
    const { data } = await Axios({ url: 'https://api.github.com/user' })
    if (data) {
      this.resetUserInfo(data)
    }
  }
  resetUserInfo(info) {
    this.setState({
      userInfo: info
    })
  }
  render() {
    // const items = [{
    //   height: 300,
    //   url: `https://muyunyun.cn/waterfall/images/${i + 1}.png`,
    //   width: 200
    // }]

    const { loading } = this.state

    return (
      <div style={{ overflowX: "hidden", height: 'calc(100% - 50px)' }} id='scroll'>
        <div id='waterfall' style={{ width: '100vw' }} >
        </div>
        {
          <div class="loader" id='loader' >
            <div class="loader-inner line-spin-fade-loader">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
        }

      </div>

    )
  }
}
